import React from 'react';
import {connect} from 'react-redux';
import action from '../../../store/action';
import {GoPagePush} from '../../../assets/js/utils';
import Css from '../../../assets/css/home/cart/index.css';
import HeadNavComponent from '../../../components/headNav';
class cartPage extends React.Component{
    constructor(){
        super();
        this.state={
            isAllChecked:true
        }
    }
    componentDidMount(){
        this.isAllChecked()
    }

    //删除购物车商品
    delectItem(index){
        this.props.dispatch(action.actCart.delectCart({
            index:index
        }));
        this.isAllChecked()
    }
    //选择产品
    checkedItem(index,checked){
        this.props.dispatch(action.actCart.checkedItem({
            index:index,
            checked:checked
        }));
        this.isAllChecked()
    }
    //检测是否全选
    isAllChecked(){
        let isAllChecked=true;
        if(this.props.state.redCart.aCartData.length>0){
            for(let i in this.props.state.redCart.aCartData){
                if(this.props.state.redCart.aCartData[i].checked){
                    this.setState({isAllChecked:false});
                    isAllChecked=false;
                    break;
                }
            }
            if(isAllChecked){
                this.setState({isAllChecked:true});
            }
        }else {
            this.setState({isAllChecked:false});
        }

    }
    //点击全选
    chickAllChecked(checked){
        this.props.dispatch(action.actCart.clickAllChecked({
            checked:checked
        }))
        this.isAllChecked()
    }
    //增加数量
    incAmount(index){
        if (!this.props.state.redCart.aCartData[index].checked){
            this.props.dispatch(action.actCart.incAmount({
                index:index
            }))
        }
    }
    //减少数量
    decAmount(index){
        if (this.props.state.redCart.aCartData[index].amount>1&&!this.props.state.redCart.aCartData[index].checked){
            this.props.dispatch(action.actCart.decAmount({
                index:index
            }))
        }
    }
    //改变数量
    changeAmount(e,index){
        let iAmount=1;
        if (e.target.value!==''){
            iAmount=parseInt(e.target.value.replace(/[a-zA-Z]|[\u4e00-\u9fa5]|[#|*|,|+|;|.]/g,''));
        }
        if (!this.props.state.redCart.aCartData[index].checked){
            this.props.dispatch(action.actCart.changeAmount({
                amount:iAmount,
                index:index
            }))
        }
    }
    //点击进入页面、
    goPage(url){
        if(this.props.state.redCart.total>0) {
            GoPagePush(this.props, url)
        }
    }
    render(){
        return(
            <div>
                <HeadNavComponent title={'购物车'} ></HeadNavComponent>
                <div className={Css['cartMain']}>
                    <div className={Css['cartUl']}>
                        <ul>
                            {
                                this.props.state.redCart.aCartData.length>0?
                                    this.props.state.redCart.aCartData.map((item,index)=>{
                                        return(
                                            <li key={index}>
                                                <div className={item.checked?Css['cartUlIcn']:Css['cartUlIcn']+' '+Css['active']} onClick={this.checkedItem.bind(this,index,!item.checked)}><i className={'selectedIcn fs28'} /></div>
                                                <div className={Css['cartUlImg']}>
                                                    <img src={item.img} alt={item.title} />
                                                    <p className={Css['cartUlImgBtn']} onClick={this.delectItem.bind(this,index)}>删除</p>
                                                </div>
                                                <div className={Css['cartUlFont']}>
                                                    <div className={Css['cartUlFontTitle']}>{item.title}</div>
                                                    <div className={Css['cartUlFontArrt']}>
                                                        {
                                                            item.attrs.length>0?
                                                                item.attrs.map((item1,index1)=>{
                                                                    return(
                                                                        <span key={index1}>{item1.title}：
                                                                            {
                                                                                item1.param.length>0?
                                                                                    item1.param.map((item2,index2)=>{
                                                                                        return(
                                                                                            <React.Fragment key={index2}>
                                                                                                {item2.title}
                                                                                            </React.Fragment>
                                                                                        )
                                                                                    })
                                                                                :''
                                                                            }
                                                                        </span>
                                                                    )
                                                                })
                                                                :''
                                                        }
                                                    </div>
                                                    <div className={Css['cartUlFontnNum']}>
                                                        <div className={Css['cartUlFontPrice']}>¥{item.price}</div>
                                                        <div className={Css['cartUlFontnNumbor']}>
                                                            <i className={this.props.state.redCart.aCartData[index].amount>1?'':Css['active']} onClick={this.decAmount.bind(this,index) }>-</i>
                                                            <div className={Css['cartUlFontnNumInput']}><input type="tel" value={item.amount} onChange={(e)=>{this.changeAmount(e,index)}} /></div>
                                                            <i onClick={this.incAmount.bind(this,index)}>+</i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        )
                                    })
                                :'请去添加商品'
                            }
                        </ul>
                    </div>
                </div>
                <div className={Css['cartBottom']}>
                    <div className={Css['cartAllSelect']} onClick={this.chickAllChecked.bind(this,this.state.isAllChecked)}>
                        <div className={this.state.isAllChecked?Css['cartUlIcn']+' '+Css['active']:Css['cartUlIcn']}><i className={'selectedIcn fs28'} /></div>
                        <p>全选</p>
                    </div>
                    <div className={Css['cartStrike']}>
                        <div className={Css['cartTotal']}>合计:<span>{this.props.state.redCart.total}</span></div>
                        <div className={this.props.state.redCart.total>0?Css['cartBtn']:Css['cartBtn']+' '+Css['disable']} onClick={this.goPage.bind(this,'balance/index')}>去结算</div>
                    </div>
                </div>
            </div>
        )
    }
}
export default connect((state)=>{
    return{
        state:state
    }
})(cartPage);